import { FC, useEffect } from "react"
import styles from "./ChartView.less"
import { LeftOutlined } from "@ant-design/icons"
const Echarts = require("echarts/lib/echarts")
require("echarts/lib/chart/line")
const chartView: FC = () => {

  const initChart = () => {
    // 基于准备好的dom，初始化echarts实例
    let char = document.getElementById("myChartTrue")
    let myChart = Echarts.init(
      document.getElementById("myChartTrue")
    )
    // 绘制图表
    // char.style.width = 2 * 320 + "px";
    // char.style.height = 300 + "px";
    myChart.setOption({
      title: {},
      grid: {
        left: 0,
        right: -10,
        bottom: 15,
        containLabel: false,
        height: 241
      },
      xAxis: {
        type: "category",
        // axisLine: {
        //   onZero: false
        // },
        data: [5, 35, 83, 15, 175],
        // boundaryGap: false,
        // splitNumber: 200
        show: false
      },
      yAxis: [{
        type: "value",
        show: false,
        min: 52,
        max: 52,
      }, {
        type: "value",
        show: false,
        min: 50,
        max: 175,
      }, {
        type: "value",
        show: true,
        min: 15,
        max: 80,
        interval: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: "#ccc",
            type: "dashed"
          }
        }
      }],
      tooltip: {
        trigger: "axis"
      },
      series: [
        {
          data: [5, 35, 83, 15, 175],
          smooth: true,
          type: "line",
          connectNulls: true,
          itemStyle: {
            normal: {
              color: "#333333",
              lineStyle: {
                color: "#333333"
              }
            }
          },
          yAxisIndex: 0,
        },
        {
          data: [10, 15, 63, 85, 75],
          smooth: true,
          type: "line",
          connectNulls: true,
          itemStyle: {
            normal: {
              color: "#fe4545",
              lineStyle: {
                color: "#fe4545"
              }
            }
          },
          yAxisIndex: 1,
          // symbol: "circle",
          // symbolSize: 5 //拐点大小
        },
        {
          data: [4, 5, 23, 35, 45],
          smooth: true,
          type: "line",
          connectNulls: true,
          itemStyle: {
            normal: {
              color: "#266dfd",
              lineStyle: {
                color: "#266dfd"
              }
            }
          },
          yAxisIndex: 2,
          // symbol: "circle",
          // symbolSize: 5 //拐点大小
        }
      ]
    })
  }

  useEffect(() => {
    initChart()
  }, [])

  return (
    <div className={styles.chartViewBox}>
      <div className={styles.chartView}>
        <div className={styles.backBtn}> <LeftOutlined />返回</div>
        <ul className={styles.header} >
          <li>住院号：dsfdsf</li>
          <li>入院日期：sfsdf</li>
          <li>出院日期：fsdf</li>
          <li>诊断：sdfsdf</li>
        </ul>
        <div className={styles.container}>
          <div className={styles.left}>
            <ul className={styles.ul}>
              <li>日期</li>
              <li>时间</li>
              <li className={styles.otherLi}>
                <div className={styles.otherList}>
                  <ul className={styles.otherUl1}>
                    <li>呼吸</li>
                    <li>90</li>
                    <li>80</li>
                    <li>70</li>
                    <li>60</li>
                    <li>50</li>
                    <li>40</li>
                    <li>30</li>
                    <li>20</li>
                    <li>10</li>
                  </ul>
                  <ul className={styles.otherUl2} >
                    <li>脉搏</li>
                    <li>180</li>
                    <li>160</li>
                    <li>140</li>
                    <li>120</li>
                    <li>100</li>
                    <li>80</li>
                    <li>60</li>
                    <li>40</li>
                    <li>20</li>
                  </ul>
                  <ul className={styles.otherUl3}>
                    <li>体温</li>
                    <li>42</li>
                    <li>41</li>
                    <li>40</li>
                    <li>39</li>
                    <li>38</li>
                    <li>37</li>
                    <li>36</li>
                    <li>35</li>
                    <li>34</li>
                  </ul>
                </div>
              </li>
              <li>心率（次/min）</li>
              <li>血压（mmHg）</li>
              <li>体重（kg）</li>
              <li>腹围（cm）</li>
              <li>血糖（mmol/L）</li>
              <li>血氧（%）</li>
              <li>瞳孔（mm）</li>
              <li>总出量（ml）</li>
              <li>总入量（ml）</li>
              <li className={styles.mAdvice}>
                药品医嘱
                <span className={styles.typeNote}>
                  备注：
                  <span className={`${styles.mType} ${styles.mType1}`}>口服</span>
                  <span className={`${styles.mType} ${styles.mType2}`}>静脉</span>
                  <span className={`${styles.mType} ${styles.mType3}`}>其他药品</span>
                </span>
              </li>
            </ul>
          </div>
          <div className={styles.right}>
            <table>
              <tbody>
                <tr>
                  <td style={{ wordWrap: "break-word" }}>jkhjk</td>
                  <td style={{ wordWrap: "break-word" }}>sdd</td>
                  <td style={{ wordWrap: "break-word" }}>dsdf</td>
                  <td style={{ wordWrap: "break-word" }}>dsdf</td>
                </tr>
                <tr className={`${styles.bgtR} ${styles.tableTime}`}>
                  <td className={styles.otherTd}>
                    <div className={styles.itemBox}>
                      <span>4</span>
                      <span>8</span>
                      <span>12</span>
                      <span>16</span>
                      <span>20</span>
                      <span>24</span>
                    </div>
                  </td>
                  <td className={styles.otherTd}>
                    <div className={styles.itemBox}>
                      <span>4</span>
                      <span>8</span>
                      <span>12</span>
                      <span>16</span>
                      <span>20</span>
                      <span>24</span>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td id='myChartTrue' style={{ backgroundColor: "#ffffff", height: 298, width: 200 }} >防守打法</td>
                </tr>
                {/* 心率  */}
                <tr className={styles.bgtR}>
                  <td style={{ wordWrap: "break-word" }}>sfsdsd</td>
                  <td style={{ wordWrap: "break-word" }}>sfsdsd</td>
                </tr>
                {/* 血压 */}
                <tr>
                  <td style={{ wordWrap: "break-word" }}>的说法是奋斗</td>
                  <td style={{ wordWrap: "break-word" }}>的说法是奋斗</td>
                </tr>
                {/* 体重  */}
                <tr className={styles.bgtR}>
                  <td style={{ wordWrap: "break-word" }}>多福多寿</td>
                  <td style={{ wordWrap: "break-word" }}>水电费水电费</td>
                </tr>
                {/* 腹围  */}
                <tr>
                  <td style={{ wordWrap: "break-word" }}>是的发生的</td>
                  <td style={{ wordWrap: "break-word" }}>电风扇</td>
                </tr>
                {/* 血糖  */}
                <tr className={styles.bgtR}>
                  <td style={{ wordWrap: "break-word" }}>是的水电费</td>
                  <td style={{ wordWrap: "break-word" }}>是的水电费</td>
                </tr>
                {/* 血氧 */}
                <tr>
                  <td style={{ wordWrap: "break-word" }}>第三方</td>
                  <td style={{ wordWrap: "break-word" }}>发多少</td>
                </tr>
                {/* 瞳孔 */}
                <tr className={styles.bgtR}>
                  <td style={{ wordWrap: "break-word" }}>师傅的说法</td>
                  <td style={{ wordWrap: "break-word" }}>师傅的说法</td>
                </tr>
                {/* 总出量 */}
                <tr>
                  <td style={{ wordWrap: "break-word" }}>双方各分管</td>
                  <td style={{ wordWrap: "break-word" }}>双方各分管</td>
                </tr>
                {/* 总入量 */}
                <tr className={styles.bgtR}>
                  <td style={{ wordWrap: "break-word" }}>水电费水电费</td>
                  <td style={{ wordWrap: "break-word" }}>水电费水电费</td>
                </tr>
                {/*  药品医嘱 */}
                <tr className={styles.mAdviceTr}>
                  <td style={{ wordWrap: "break-word" }}>dffsf</td>
                </tr>
                <tr className={styles.mAdviceTr}>
                  <td style={{ wordWrap: "break-word" }}>dffsf</td>
                </tr>
                {/* <tr className={styles.mAdviceTr}>
                  <td style={{ wordWrap: "break-word" }}>dffsf</td>
                </tr> */}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}
export default chartView